<template>
  <div class="topleft">
    <div class="topleft-top">水位站实时监控</div>

    <div class="topleft-center">
      <div class="topleft-center-left">
        <!-- <div class="left-inp">
          <el-select v-model="value" placeholder="请选择">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
        </div>-->

        <div class="left-tab">
          <div class="left-tab-son">
            <div
              class="tab-sona"
              :class="stationId==v.id?'active':''"
              v-for="(v,i) in data.list"
              @click="getOne(v.id,v.stationName)"
              :key="i"
            >{{v.stationName}}</div>
          </div>
        </div>
      </div>
      <div class="topleft-right">
        <!-- <div class="right-top">
          <div class="right-top-L">{{stationNamea}}</div>
          <div class="right-top-R">
            当前水位:
            <span>160</span>
          </div>
        </div>-->
        <div class="videoCenter">
          <div class="oneList">
            <div style="width:100%;height:100%">
              <iframe
                frameborder="0"
                scrolling="no"
                :src="`https://open.ys7.com/ezopen/h5/iframe_se?url=${oneVideoInfo.videoAddress}&accessToken=${oneVideoInfo.accessToken}`"
                width="100%"
                height="100%"
                id="ysOpenDevice"
                allowfullscreen
              ></iframe>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      options: [
        {
          value: "全部",
          label: "全部"
        },
        {
          value: "超限",
          label: "超限"
        }
      ],
      value: "",
      oneVideoInfo: {}, //单个信息详情
      stationId: 1,
      tabPosition: "left",
      //视频
      speed: 1,
      index: 0,
      accessToken: "",
      deviceserial: "",
      selectId: "",
      isAll: true,
      showId: "",
      stationNamea: "广利河西五路",
      data: {
        pagesize: 4,
        currpage: 1,
        list: []
      },
      oneList: [],
      valiPage: [],
      valiList: [],
      waterEquipmentList: []
    };
  },
  created() {
    this.getVideo();
    this.getOneVideo();
  },
  methods: {
    getOneVideo() {
      this.$http
        .post("deviceCamera/findByStationId", {
          stationId: this.stationId
        })
        .then(res => {
          this.oneVideoInfo = res.data[0];
        });
    },
    //视频切换
    getBtns(item) {
      console.log(item);
      this.showId = item.id;
      // this.btnShow = true;
    },
    closedBtns(item) {
      this.showId = "";
    },
    changeVideo(direction, item) {
      let accessToken = item.cameraAccessToken;
      let cameraNumber = item.cameraNumber;
      this.getVideoAbility(direction, accessToken, cameraNumber, 1);
    },
    // 视频停止
    changeVideoStop(speed, item) {
      let accessToken = item.cameraAccessToken;
      let cameraNumber = item.cameraNumber;
      this.getVideoAbility(0, accessToken, cameraNumber, -1);
    },
    // 视频数据流
    getVideoAbility(direction, accessToken, cameraNumber, speed) {
      this.$http
        .post("deviceCamera/changeLocation", {
          accessToken: accessToken,
          cameraNumber: cameraNumber,
          channelNumber: 1,
          direction: direction, //方向
          speed: speed //速度
        })
        .then(res => {
          // setTimeout(() => {
          //   let item = { accessToken, cameraNumber };
          //   this.changeVideoStop(speed, item);
          // }, 2000);
        });
    },
    //获取视频流

    getVideo() {
      this.$http
        .post("station/findListAndCamera", {
          companyId: localStorage.getItem("companyId")
        })
        .then(res => {
          this.valiList = res.data;
          // this.valiList.forEach(item => {
          //   item.indexId = item.id;
          //   this.accessToken = item.cameraAccessToken;
          //   this.deviceserial = item.cameraDeviceNumber;
          //   item.endTime = `https://open.ys7.com/ezopen/h5/iframe_se?url=${item.cameraVideoAddress}&accessToken=${item.cameraAccessToken}`;
          // });
          this.data.list = this.valiList;
        });
    },
    getAll() {
      this.isAll = true;
      this.selectId = "";
      this.getVideo();
    },
    //视频切换
    getOne(stationId, stationName) {
      this.stationId = stationId;
      this.getOneVideo();
    },
    nextpage(value) {
      this.data.currpage = value;
    }
  }
};
</script>

<style scoped lang="less">
//清除浮动
.clearfix:before,
.clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}
.clearfix {
  *zoom: 1;
}
.list li {
  list-style-type: none;
}
.topleft {
  background: #fff;
  height: 430px;
  box-shadow: 0px 0px 10px 0px rgba(102, 102, 102, 0.3);
  .topleft-top {
    text-align: left;
    color: #333;
    font-size: 16px;
    font-weight: 600;
    height: 48px;
    line-height: 48px;
    border-bottom: 1px solid rgba(245, 245, 245, 1);
    padding-left: 10px;
  }
  .topleft-center {
    margin-top: 5px;
    padding-left: 10px;
    height: 340px;
    overflow: hidden;
    .topleft-center-left {
      width: 130px;
      height: 100%;
      // background: red;
      float: left;
      .left-inp {
        width: 130px;
      }
      .left-tab {
        margin-top: 10px;
        border: 1px solid rgb(245, 245, 245);
        .left-tab-son {
          text-align: left;
          height: 300px;
          overflow-y: auto;
          .tab-sona {
            height: 28px;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            cursor: pointer;
            width: 100px;
          }
        }
      }
    }
    .topleft-right {
      float: right;
      width: 315px;
      height: 340px;
      .videoCenter {
        margin-top: 5px;
        height: 315px;
        width: 100%;
        background-color: rgb(4, 8, 8);
        .oneList {
          height: 100%;
          width: 100%;
        }
      }
      .right-top {
        height: 40px;
        // background: red;
        padding: 0 10px;
        .right-top-L {
          float: left;
          height: 40px;
          line-height: 40px;
        }
        .right-top-R {
          float: right;
          height: 40px;
          line-height: 40px;
        }
      }
    }
  }
}
.active{
  background-color: rgb(182, 128, 233);
  color: #fff;
}
//靠过来的
</style>